<template>
  <FormItem :label="label" :prop="prop">
    <Select :value="value" :clearable="clearable" :transfer="transfer" :placeholder="placeholder" :filterable="filterable"
            :filterable-by-label="filterByLabel" :multiple="multiple" :disabled="disabled"
            @on-change="handleChange" >
      <Option v-for="item in list" :value="item.value" :key="item.id">{{item.name}}</Option>
    </Select>
  </FormItem>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
  components: {},
})
export default class CategorySelectCommon extends AbpBase {
  name: string = 'CategorySelectCommon';


  @Prop({type: [Array,String,Number]}) value:any;
  @Prop({type: String, default: ''}) label: string;
  @Prop({type: String, default: ''}) prop: string;
  @Prop({type: Boolean, default: false}) clearable: boolean;
  @Prop({type: Boolean, default: false}) transfer: boolean;
  @Prop({type: String, default: ''}) placeholder: string;
  @Prop({type: Boolean, default: false}) filterable: boolean;
  @Prop({type: Boolean, default: false}) filterByLabel: boolean;
  @Prop({type: Boolean, default: false}) multiple: boolean;
  @Prop({type: Boolean, default: false}) disabled: boolean;
  @Prop({type: String, default: ''}) code: string;


  get list(){
    return this.$store.state.dictionary.dictionariesByCategoryCode;
  }

  handleChange(value){
    this.$emit('on-change',value);
    this.$emit('input',value);
  }


  created(){
    this.$store.dispatch({
      type:'dictionary/getDictionariesByCategoryCode',
      data:{
        code:this.code,
      },
    });
  }
}
</script>

<style lang="less" scoped>

</style>
